<template>
  <Modal v-model="show" title="组织机构人员信息" :width="1300">
    <Table border :columns="columns" :data="data" row-key="id">
      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total"
                          :items-per-page="rows"
                          :show-page-size="5" force-ellipses/>
        </div>
      </template>
      <template #roles="{ row, index }">
        <span>{{ getRolesText(row.roles) }}</span>
      </template>

      <template #locked="{ row, index }">
        <Tag color="error" v-if="row.locked">是</Tag>
        <Tag color="primary" v-else>否</Tag>
      </template>
    </Table>
  </Modal>
</template>
<script>
import {defineComponent} from 'vue'
import DotTag from "@/components/DotTag.vue";
import VanPagination from "@/components/VanPagination.vue";

export default defineComponent({
  props: {
    orgId: {type: Number, required: false}, // 组织机构ID
    modelValue: {type: Boolean, required: true} //
  },
  data() {
    return {
      page: 1,
      total: 0 ,
      rows: 10 ,
      columns: [
        {title: '用户名', key: 'username', tree: true},
        {title: '手机号', key: 'tel'},
        {title: '真实姓名', key: 'realName'},
        {title: '岗位', key: 'positions'},
        {title: '电子邮箱', key: 'email'},
        {title: '角色', slot: 'roles', width: 300},
        {title: '锁定', slot: 'locked', width: 100},
        {title: '注册时间', key: 'createTime', width: 165},
      ],
      data: [
        {
          id: 1,
          username: 'admin',
          desc: '保密',
          birth: '',
          tel: '1338888888',
          realName: 'haredot',
          email: 'admin@git.com',
          departs: '总经办',
          positions: '董事长',
          locked: false,
          createTime: '2000-11-10 10:11:11',
          status: true,
          roles: [
            {id: 1, name: '超级管理员'},
            {id: 2, name: '管理员'},
            {id: 3, name: '普通用户'},
          ]
        },

      ],
    }
  },
  emits: ["update:model-value"],
  components: {VanPagination, DotTag},
  watch: {
    orgId: function(newVal) {
       // 监控组织机构ID的变化, 查询对应的数据
      console.log("正在查询机构ID = " + newVal + " 的用户信息");
    }
  },
  methods: {
    getRolesText(roles) {
      let text = "";
      roles.forEach(role => text += role.name + ", ");
      return text.substring(0, text.length - 2);
    },
  },
  computed: {
    show: {
      set(newVal) {
        this.$emit("update:model-value", newVal);
      },
      get() {
        return this.modelValue;
      }
    },
  }
})
</script>


<style scoped>

</style>